<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
style: {
navigationStyle: 'custom',
navigationBarTitleText: '优惠券',
},
}
</route>

<template>
  <view class="bg overflow-hidden pt-11" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <view class="top">
      <view class="flex items-center">
        <img
          style="margin-left: 1.13rem"
          src="@/static/app/custom-icon/ze-arrow-left%201@1x.png"
          alt=""
          @click="handleClickLeft"
        />
        <text class="title">优惠券</text>
      </view>
    </view>

    <view>
      <view v-for="item in list" class="item">
        <view class="flex items-center justify-between">
          <text class="name">{{ item.name }}</text>
          <view class="flex items-center">
            <text class="money">￥{{ item.money }}</text>
            <wd-checkbox size="large"  v-model="item.checked" @change="handleChange"></wd-checkbox>
          </view>
        </view>
        <text class="expire-time">
          {{ item.expireTime }}
        </text>
      </view>
    </view>

    <view class="btn">去付款</view>
  </view>
</template>

<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const {safeAreaInsets} = uni.getSystemInfoSync()



const list = ref([
  {
    name: '立减红包',
    expireTime: '有效期至2024-10-30',
    money: '1.00',
    checked: false
  },
  {
    name: '立减红包',
    expireTime: '有效期至2024-10-30',
    money: '1.00',
    checked: true
  }

])

function handleChange({ value }) {
  console.log(value)
}


const handleClickLeft = () => {
  uni.navigateBack()
}
</script>

<style scoped lang="scss">
.bg {
  height: 100vh;
  box-sizing: border-box;
  background-color: rgba(242, 243, 247, 1);
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow: auto;

  .top {
    width: 100%;
    padding-bottom: 1.63rem;
  }

  .btn {
    width: 20.69rem;
    height: 2.88rem;
    position: absolute;
    bottom: 1.63rem;
    margin: 0 auto;
    font-family: SourceHanSansSC-regular;
    font-size: 1rem;
    line-height: 2.88rem;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    background-color: rgba(88, 143, 255, 1);
    border-radius: 1.44rem;
  }
}

.title {
  height: 1.75rem;
  line-height: 1.75rem;
  color: rgba(16, 16, 16, 1);
  font-size: 1.25rem;
  font-family: SourceHanSansSC-bold;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.item {
  width: 21rem;
  height: 6.56rem;
  line-height: 1.25rem;
  border-radius: 0.63rem;
  background-color: rgba(255, 255, 255, 1);
  font-family: PingFangSC-regular;
  margin-bottom: 1.56rem;
  box-sizing: border-box;
  padding: 1.5rem 1.31rem 1.56rem 1.25rem;

  .name{
    height: 1.75rem;
    line-height: 1.75rem;
    color: rgba(0,0,0,1);
    font-size: 1.25rem;
    font-family: PingFangSC-regular;
  }

  .expire-time{
    height: 1.75rem;
    line-height: 1.44rem;
    color: rgba(154,154,154,1);
    font-size: 1rem;
    font-family: PingFangSC-regular;
  }

  .money{
    height: 1.75rem;
    line-height: 1.75rem;
    color: rgba(189,49,36,1);
    font-size: 1.25rem;
    font-family: PingFangSC-regular;
    padding-right: 0.69rem;
  }
}
</style>
